<script setup>
import { ref, watch } from 'vue'
import {login,register} from "@/apis/login"
import { useRouter } from 'vue-router'
import { useUserStore } from "@/stores/user"

const router = useRouter()
const userStore = useUserStore()

const dialogTableVisible = ref(false)
const isLogin = ref(true)//----------是否为登录模块
const lg_index = ref(1) //---------账号密码登录 1 or 邮箱登录 2
const bo_line = ref() //---------- 下划线

// 登录或注册功能
const login_resg = async() => {
    if (isLogin.value) {
        const res = await login({ username:form.value.username,password:form.value.pass })
        if (res.success) {
            userStore.Token = res.data.token
            ElMessage.success("登录成功")
            router.push('/backspace')
        } else {
            ElMessage.error(res.message)
        }
    } else {
        const res = await register({ username: form.value.username, password: form.value.pass,mail:form.value.email })
        if(res.success){
            isLogin.value=true
        }else{
            alert(res.message)
        }
        
    }
}
// ------------校验模块
const form = ref({
    email:'',
    username:'',
    password:'',
    new_password:'',
    Verifica:''
})
const formRef = ref()
//----------------- 清空form模块
const clearForm = () =>{
    form.value = {
        email: '',
        username: '',
        password: '',
        new_password: '',
        Verifica: ''
}}
// 切换登录注册状态
const Switch_islogin=()=>{
    isLogin.value=!isLogin.value
    clearForm()
}
// 切换登录模式
const tab = (i) => {
    lg_index.value = i
    lg_index.value == 1 ? bo_line.value.style.transform = "translate(0px)" : bo_line.value.style.transform = "translate(180px)"
    clearForm()
}
// 当对话框关闭或开启时也要清理
watch(()=>dialogTableVisible.value,()=>clearForm())

// -----------校验规则
const rules = {
    email: [
        {  required: true,message: '请输入邮箱地址',trigger: 'blur' },
        {   type: 'email',message: '请输入正确的邮箱',trigger: ['blur', 'change'] },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { pattern: /^\d{6,15}$/, message: '密码为6~15位数字组成', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    new_password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/, message: '密码为6~15位数字和字母组成', trigger: 'blur' }
    ]
    }

</script>

<template>
    <div class="Login">
        <div class="container">
            <h2 class="logo">微链智达</h2>
            <div v-if="isLogin" class="tab">
                <div ref="bo_line" class="bo_line"></div>
                <div @click="tab(1)" class="tab_item" :class="{ active: lg_index == 1 }">普通登录</div>
                <div @click="tab(2)" class="tab_item" :class="{ active: lg_index == 2 }">邮箱登录</div>
            </div>
            <div v-else class="Regtab"></div>
            <el-form ref="formRef" style="max-width: 600px" :model="form" label-width="auto" class="Formtable">
                <div class="Email" v-if="lg_index==2 || !isLogin">
                    <h3>邮箱</h3>
                    <el-form-item prop="email" :rules="rules.email"><el-input placeholder="请输入绑定的邮箱"
                            v-model="form.email" /></el-form-item>
                </div>
                <div class="Username" v-if="lg_index == 1 || !isLogin">
                    <h3>用户名</h3>
                    <el-form-item prop="username" :rules="rules.username"><el-input placeholder="请输入用户名"
                            v-model="form.username" /></el-form-item>
                </div>
                <h3>密码<span @click="dialogTableVisible=true" v-if="isLogin">忘记密码?</span></h3>
                <el-form-item prop="pass" :rules="rules.password">
                    <el-input placeholder="请输入密码" v-model="form.pass" type="password" />
                </el-form-item>
            </el-form>
            <el-button type="primary" style="width: 100%;" @click="login_resg">{{ isLogin ? '登录' : '注册'}}</el-button>
            <div @click="Switch_islogin" class="regs">{{ isLogin? "没有账号？注册一个" : "登录"}}</div>
        </div>
        <!-- 忘记密码 -->
        <el-dialog v-model="dialogTableVisible" title="重置密码" width="600">
            <el-form ref="formRef" style="max-width: 600px" :model="form" label-width="auto" class="Formtable">
                <div class="Email">
                    <h3>邮箱地址</h3>
                    <el-form-item prop="email" :rules="rules.email"><el-input placeholder="请输入绑定的邮箱"
                            v-model="form.email" /></el-form-item>
                </div>
                <div class="Verifica">
                    <h3>验证码</h3>
                    <el-form-item prop="Verifica"><el-input placeholder="请输入验证码" v-model="form.Verifica" /><el-button
                            type="primary">获取验证码</el-button></el-form-item>
                </div>
                <h3>新密码</h3>
                <el-form-item prop="new_password" :rules="rules.new_password">
                    <el-input placeholder="请输入新密码" v-model="form.new_password" type="password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="clearForm">取消</el-button>
                    <el-button type="primary" @click="clearForm">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
    .Login{
        background-color: rgb(238,240,245);
        width: 100vw;
        height: 100vh;
        padding-top: 100px;
        box-sizing: border-box;
        .container{
            margin: 0 auto;
            padding: 50px;
            width: 360px;
            height: 510px; 
            background-color: #fff;
            text-align: center;
            .logo{
                letter-spacing: 5px;
                font-size: 30px;
                color: rgb(59, 66, 107);;
            }
            .tab{
                margin-top: 40px;
                position: relative;
                color: #515a6e;
                width: 100%;
                height: 34px;
                transition: all ;
                transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
                .bo_line{
                    position: absolute;
                    width: 170px;
                    height: 2px;
                    bottom: 0;
                    background-color: #000;
                    transition: transform .3s ease-in-out;
                }
                .tab_item{
                    width: 50%;
                    text-align: center;
                    display: inline-block;
                    height: 100%;
                    padding: 8px 16px;
                    box-sizing: border-box;
                    cursor: pointer;
                    text-decoration: none;
                    position: relative;
                    transition: color .3s ease-in-out;
                }
                .active{
                    color: #000;
                    font-weight: 600;
                }
            }
            .regs {
                width: 100%;
                height: 40px;
                line-height: 40px;
                margin-top: 5px;
                cursor: pointer;
            }
            .regs:hover{
                color: coral;
                text-decoration: underline;
            }
        } 
        .Formtable {
            margin: 30px 0;
            h3 {
                text-align: left;
                line-height: 40px;
                color: #000;
                span {
                    cursor: pointer;
                    float: right;
                    font-size: 10px;
                    font-weight: 400;
                }

                span:hover {
                    text-decoration: underline;
                    color: #4880f7;
                }
            }
        }
        .Verifica{
            .el-form-item{
                display: flex;
                .el-input{
                    width: 70%;
                    margin-right: 20px;
                }
            }
        }
    }
</style>